<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Floating Action Button - Basic</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Floating Action Button - Basic</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding" id="content" fullscreen>
        <f></f>
        <f></f>

        <ion-button>Test</ion-button>
        <ion-fab-button disabled href="#path" onclick="throw 'no clickable'">FAB</ion-fab-button>

        <ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
          <ion-fab-button size="small" class="e2eFabTopRight">
            <ion-icon name="add"></ion-icon>
          </ion-fab-button>
          <ion-fab-list>
            <ion-fab-button>
              <ion-icon name="logo-facebook"></ion-icon>
            </ion-fab-button>
            <ion-fab-button>
              <ion-icon name="logo-twitter"></ion-icon>
            </ion-fab-button>
            <ion-fab-button>
              <ion-icon name="logo-vimeo"></ion-icon>
            </ion-fab-button>
            <ion-fab-button>
              <ion-icon name="logo-instagram"></ion-icon>
            </ion-fab-button>
          </ion-fab-list>
        </ion-fab>

        <ion-fab vertical="bottom" horizontal="start" edge id="fab2" slot="fixed">
          <ion-fab-button color="dark" class="e2eFabBottomRight" disabled>
            <ion-icon name="arrow-up-circle"></ion-icon>
          </ion-fab-button>
          <ion-fab-list side="start">
            <ion-fab-button>
              <ion-icon name="logo-facebook"></ion-icon>
            </ion-fab-button>
            <ion-fab-button>
              <ion-icon name="logo-twitter"></ion-icon>
            </ion-fab-button>
            <ion-fab-button>
              <ion-icon name="logo-vimeo"></ion-icon>
            </ion-fab-button>
            <ion-fab-button>
              <ion-icon name="logo-instagram"></ion-icon>
            </ion-fab-button>
          </ion-fab-list>
        </ion-fab>

        <ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
          <ion-fab-button color="secondary" class="e2eFabTopLeft">
            <ion-icon name="arrow-forward-circle"></ion-icon>
          </ion-fab-button>
          <ion-fab-list side="end">
            <ion-fab-button>
              <ion-icon name="logo-facebook"></ion-icon>
            </ion-fab-button>
            <ion-fab-button>
              <ion-icon name="logo-twitter"></ion-icon>
            </ion-fab-button>
            <ion-fab-button>
              <ion-icon name="logo-vimeo"></ion-icon>
            </ion-fab-button>
            <ion-fab-button>
              <ion-icon name="logo-instagram"></ion-icon>
            </ion-fab-button>
          </ion-fab-list>
        </ion-fab>

        <ion-fab vertical="center" horizontal="center" id="fab5" slot="fixed">
          <ion-fab-button class="e2eFabCenter">
            <ion-icon name="share"></ion-icon>
          </ion-fab-button>
          <ion-fab-list side="top">
            <ion-fab-button color="primary">
              <ion-icon name="logo-vimeo"></ion-icon>
            </ion-fab-button>
            <ion-fab-button color="light">
              <ion-icon name="logo-instagram"></ion-icon>
            </ion-fab-button>
          </ion-fab-list>
          <ion-fab-list side="bottom">
            <ion-fab-button color="secondary">
              <ion-icon name="logo-facebook"></ion-icon>
            </ion-fab-button>
            <ion-fab-button color="dark">
              <ion-icon name="logo-twitter"></ion-icon>
            </ion-fab-button>
          </ion-fab-list>
          <ion-fab-list side="start">
            <ion-fab-button color="light">
              <ion-icon name="logo-instagram"></ion-icon>
            </ion-fab-button>
            <ion-fab-button color="primary">
              <ion-icon name="logo-vimeo"></ion-icon>
            </ion-fab-button>
          </ion-fab-list>
          <ion-fab-list side="end">
            <ion-fab-button color="dark">
              <ion-icon name="logo-twitter"></ion-icon>
            </ion-fab-button>
            <ion-fab-button color="secondary">
              <ion-icon name="logo-facebook"></ion-icon>
            </ion-fab-button>
          </ion-fab-list>
        </ion-fab>

        <ion-fab horizontal="end" vertical="bottom" slot="fixed">
          <ion-fab-button color="danger" onclick="add()">
            <ion-icon name="add"></ion-icon>
          </ion-fab-button>
        </ion-fab>
      </ion-content>

      <ion-footer>
        <ion-toolbar>
          <ion-buttons slot="secondary">
            <ion-button onclick="closeLists()">Close</ion-button>
          </ion-buttons>
          <ion-title>Footer</ion-title>
        </ion-toolbar>
      </ion-footer>

      <script>
        function insertAfter(el, referenceNode) {
          referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
        }

        function add() {
          var newEle = document.createElement('f');
          var ref = document.querySelector('f');
          insertAfter(newEle, ref);
        }

        function closeLists() {
          var fabs = document.querySelectorAll('ion-fab');

          for (var i = 0; i < fabs.length; i++) {
            fabs[i].activated = false;
          }
        }
      </script>

      <style>
        f {
          display: block;
          margin: 15px auto;
          max-width: 150px;
          height: 150px;
          background: blue;
        }

        f:last-of-type {
          background: yellow;
        }
      </style>
    </ion-app>
  </body>
</html>
